<template>
  <div class="scrollBox">
    <SnelArea>
      <div class="listAll y-list12 y-list26">
        <div class="item">
          <div class="shake">
            <div class="pic"><img src="../assets/t/images/demopic/pic-845X490.png" /></div>
            <div class="txt-wrap">
              <div class="txt txt04">我们的新生活</div>
              <div class="txt txt05">
                <div class="txt txt-name">浙江卫视</div>
                <div class="txt txt-time">
                  <span>今天22:30</span>
                  <span class="line">|</span>
                  <span class="play">首播</span>
                </div>
              </div>
            </div>
            <div class="btn y-dot-btn">
              <div class="point point_select"></div>
              <div class="point" style="left: 24px"></div>
              <div class="point" style="left: 48px"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="listAll y-list13">
        <div class="item">
          <div class="pic"><img src="../assets/t/images/demopic/pic-407X490.png" /></div>
          <div class="txt-wrap wrap02">
            <div class="txt txt01">浙江卫视</div>
            <div class="txt txt02">每晚18:00《江湖绝学》</div>
          </div>
        </div>
      </div>
      <div class="listAll y-list01 y-list02" style="top: 56px; left: 1413px">
        <div class="item">
          <div class="pic"><img src="../assets/t/images/demopic/pic-408X230.png" /></div>
          <div class="txt-wrap wrap01">
            <div class="txt txt01">浙江卫视</div>
            <div class="txt txt02">每晚18:00《虎爸虎妈》</div>
          </div>
        </div>
        <div class="item" style="top: 260px">
          <div class="pic"><img src="../assets/t/images/demopic/pic-408X230.png" /></div>
          <div class="txt-wrap wrap01">
            <div class="txt txt01">浙江卫视</div>
            <div class="txt txt02">每晚18:00《虎爸虎妈》</div>
          </div>
        </div>
      </div>
    </SnelArea>

    <SnelArea class="listAll y-list14" style="top: 580px">
      <div class="item">
        <div class="pic"><img src="../assets/t/images/demopic/pic-320X220.png" /></div>
      </div>
      <div class="item" style="left: 350px">
        <div class="pic"><img src="../assets/t/images/demopic/pic-320X220.png" /></div>
      </div>
      <div class="item" style="left: 700px">
        <div class="pic"><img src="../assets/t/images/demopic/pic-320X220.png" /></div>
      </div>
      <div class="item" style="left: 1050px">
        <div class="pic"><img src="../assets/t/images/demopic/pic-320X220.png" /></div>
      </div>
      <div class="item" style="left: 1400px">
        <div class="pic"><img src="../assets/t/images/demopic/pic-320X220.png" /></div>
      </div>
    </SnelArea>

    <div class="y-title" style="top: 859px">正在热播</div>
    <div class="listAll y-list28" style="top: 883px">
      <SnelArea class="scrollBox" :config="area4Config">
        <div class="item">
          <div class="pic"><img src="../assets/t/images/demopic/pic-450X254.png" /></div>
          <div class="txt-wrap">
            <div class="txt txt01">余生请多指教</div>
          </div>
        </div>
        <div class="item" style="left: 478px">
          <div class="pic"><img src="../assets/t/images/demopic/pic-450X254.png" /></div>
          <div class="txt-wrap">
            <div class="txt txt01">余生请多指教</div>
          </div>
        </div>
        <div class="item" style="left: 956px">
          <div class="pic"><img src="../assets/t/images/demopic/pic-450X254.png" /></div>
          <div class="txt-wrap">
            <div class="txt txt01">余生请多指教</div>
          </div>
        </div>
        <div class="item" style="left: 1434px">
          <div class="pic"><img src="../assets/t/images/demopic/pic-450X254.png" /></div>
          <div class="txt-wrap">
            <div class="txt txt01">余生请多指教</div>
          </div>
        </div>
        <div class="item" style="left: 1912px">
          <div class="pic"><img src="../assets/t/images/demopic/pic-450X254.png" /></div>
          <div class="txt-wrap">
            <div class="txt txt01">余生请多指教</div>
          </div>
        </div>
      </SnelArea>
    </div>

    <div class="y-title" style="top: 1268px">常看频道</div>
    <SnelArea class="listAll y-list27" style="top: 1362px">
      <div class="item">
        <div class="skin">
          <div class="icon"><img src="../assets/t/images/demopic/pic-140X140.png" /></div>
          <div class="txt">浙江卫视</div>
        </div>
      </div>
      <div class="item" style="left: 292px">
        <div class="skin">
          <div class="icon"><img src="../assets/t/images/demopic/pic-140X140.png" /></div>
          <div class="txt">浙江卫视</div>
        </div>
      </div>
      <div class="item" style="left: 584px">
        <div class="skin">
          <div class="icon"><img src="../assets/t/images/demopic/pic-140X140.png" /></div>
          <div class="txt">浙江卫视</div>
        </div>
      </div>
      <div class="item" style="left: 876px">
        <div class="skin">
          <div class="icon"><img src="../assets/t/images/demopic/pic-140X140.png" /></div>
          <div class="txt">浙江卫视</div>
        </div>
      </div>
      <div class="item" style="left: 1168px">
        <div class="skin">
          <div class="pic"><img src="../assets/t/images/y-tips-add.png" /></div>
        </div>
      </div>
      <div class="item" style="left: 1460px">
        <div class="skin">
          <div class="pic"><img src="../assets/t/images/y-tips-more.png" /></div>
        </div>
      </div>
    </SnelArea>

    <div class="y-title" style="top: 1771px">我的收藏</div>
    <SnelArea class="listAll y-list27" style="top: 1865px">
      <div class="item">
        <div class="skin">
          <div class="icon"><img src="../assets/t/images/demopic/pic-140X140.png" /></div>
          <div class="txt">浙江卫视</div>
        </div>
      </div>
      <div class="item" style="left: 292px">
        <div class="skin">
          <div class="icon"><img src="../assets/t/images/demopic/pic-140X140.png" /></div>
          <div class="txt">浙江卫视</div>
        </div>
      </div>
      <div class="item" style="left: 584px">
        <div class="skin">
          <div class="icon"><img src="../assets/t/images/demopic/pic-140X140.png" /></div>
          <div class="txt">浙江卫视</div>
        </div>
      </div>
      <div class="item" style="left: 876px">
        <div class="skin">
          <div class="icon"><img src="../assets/t/images/demopic/pic-140X140.png" /></div>
          <div class="txt">浙江卫视</div>
        </div>
      </div>
      <div class="item" style="left: 1168px">
        <div class="skin">
          <div class="pic"><img src="../assets/t/images/y-tips-add.png" /></div>
        </div>
      </div>
      <div class="item" style="left: 1460px">
        <div class="skin">
          <div class="pic"><img src="../assets/t/images/y-tips-more.png" /></div>
        </div>
      </div>
    </SnelArea>

    <!-- 回顶部/搜索 -->
    <SnelArea class="y-footerBtn01" style="top: 2271px" :config="{ bannedShake: true }">
      <div class="item">
        <div class="icon icon01"></div>
        <div class="txt">回顶部</div>
      </div>
      <div class="item" style="left: 189px">
        <div class="icon icon02"></div>
        <div class="txt">搜 索</div>
      </div>
    </SnelArea>
  </div>
</template>

<script>
export default {
  name: 'Channel',
  data() {
    return {
      /** @type {SnelArea} */
      area4Config: {
        slide: {
          slideDir: 'h',
          offset: 100,
          outReset: true,
        },
      },
    };
  },
  mounted() {
    // console.log('m');
  },
};
</script>
